import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../constants.dart';
import '../main.dart';

class FilterBar extends StatelessWidget {
  final bool isSnap;

  FilterBar({Key key, this.isSnap}):super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(margin10),
      child: Stack(
        alignment: Alignment.topLeft,
        children: [
          Container(
            child: Column(
              children: [
                Consumer<ScrollState>(
                  builder: (_, state, __) {
                    return SizedBox(height: isSnap ? state.filterBarPaddingTop : 40);
                  },
                ),
                Padding(
                  padding: const EdgeInsets.only(bottom: 16),
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 4),
                    child: Row(
                      children: [
                        Expanded(
                          child: Row(
                            children: [
                              const Text("综合排序", style: TextStyle(fontSize: 12)),
                              Image.asset(
                                "assets/wm_sc_widget_filter_bar_tab_icon_sort_drop_down_search.webp",
                                width: 14,
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: Row(
                            children: [
                              const Text("品类", style: TextStyle(fontSize: 12)),
                              Image.asset(
                                "assets/wm_sc_widget_filter_bar_tab_icon_sort_drop_down_search.webp",
                                width: 14,
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: Row(
                            children: [
                              const Text("速度", style: TextStyle(fontSize: 12)),
                              Image.asset(
                                "assets/wm_sc_widget_filter_bar_tab_icon_sort_drop_down_search.webp",
                                width: 14,
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                          child: Row(
                            children: [
                              const Text("全部筛选", style: TextStyle(fontSize: 12)),
                              Image.asset(
                                "assets/wm_sc_widget_filter_bar_tab_icon_sort_drop_down_search.webp",
                                width: 14,
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Consumer<ScrollState>(
                  builder: (_, state, __) {
                    return Row(
                      children: [
                        Expanded(
                          child: WhiteTag(title: '天天神券', showFilterBar: state.showFilterBar),
                        ),
                        const SizedBox(width: 8),
                        Expanded(
                          child: WhiteTag(title: '满减优惠', showFilterBar: state.showFilterBar),
                        ),
                        const SizedBox(width: 8),
                        Expanded(
                          child: WhiteTag(title: '品牌商家', showFilterBar: state.showFilterBar),
                        ),
                        const SizedBox(width: 8),
                        Expanded(
                          child: WhiteTag(title: '会员红包', showFilterBar: state.showFilterBar),
                        ),
                      ],
                    );
                  },
                ),
              ],
            ),
          ),
          Container(
            color: Provider.of<ScrollState>(context).showFilterBar ? Colors.white : Colors.transparent,
            child: Row(
              children: [
                CachedNetworkImage(imageUrl: urlScarLeft00, height: 24),
                const SizedBox(width: 20),
                CachedNetworkImage(imageUrl: urlScarLeft01, height: 24),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class WhiteTag extends StatelessWidget {
  final String title;
  final bool showFilterBar;
  WhiteTag({Key key, this.title, this.showFilterBar});

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.all(4),
      decoration: BoxDecoration(
        color: !showFilterBar ? Colors.white : Colors.grey[200],
        borderRadius: BorderRadius.circular(4),
      ),
      child: Text(title, style: TextStyle(fontSize: 12)),
    );
  }
}

